import React, {Component} from 'react';
import NavBar1 from "./nav-bar-1";
import NavBar2 from "./nav-bar-2";
class App extends Component {

  constructor(props) {
    super(props);
  }


  //createElement(type, props, ...children)
  //这些children元素就是子标签(虚拟DOM树的生成)
  render() {
    {/*甚至可以将element直接封装在变量中*/}
    const btn = <button>按钮</button>
    return (
        <div>
          {/*使用 children 实现插槽, 通过children传递element*/}
          <NavBar1>
            <button>按钮</button>
            <input/>
            <i>搜索</i>
          </NavBar1>
          {/* 推荐：使用 props 实现插槽, 通过props传递element */}
          <NavBar2
              leftCmp = {btn}
              centerCmp = {<input type="text"/>}
              rightCmp = {<i>你好</i>}
          />
        </div>
    );
  }
}
export default App;